<template>
  <el-dialog title="工作预警" :visible.sync="visible" width="900px" append-to-body v-if="visible" :before-close="onClose" close-on-click-modal>
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="`超期未报到【${numsData.cqwbd||0}】`" name="cqwbd"/>
          <el-tab-pane :label="`本期未尿检【${numsData.bqwnj||0}】`" name="bqwnj"/>
          <el-tab-pane :label="`外出人员【${numsData.wcry||0}】`" name="wcry"/>
          <el-tab-pane :label="`本月普通违反协议【${numsData.byptwfxy||0}】`" name="ptwfxy"/>
          <el-tab-pane :label="`本月严重违反协议【${numsData.byyzwfxy||0}】`" name="yzwfxy"/>
        </el-tabs>
      </el-col>
      <el-col :span="24">
        <el-table v-loading="loading" :data="data">
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="身份证" align="center" prop="idno" />
          <el-table-column label="决定时间" align="center" prop="jdsj" />
          <el-table-column label="人员类型" align="center" prop="subType" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.drug_user_type" :value="scope.row.subType"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>

import {bqwnjList, byptwfxyList, byyzwfxyList, cqwbdList, nums, wcryList} from "@/api/warn/warn";


export default {
  name: "mgrUserWarningList",
  dicts: ['drug_user_type'],
  data() {
    return {
      // 超期未报到 cqwbd、本期未尿检 bqwnj、外出人员 wcry、本月普通违反协议 ptwfxy
      activeName: 'cqwbd',
      data: [],
      total: 0,
      visible: false,
      loading: false,
      queryParams: {
        renderJfrq: true,
        pageNum: 1,
        pageSize: 10,
        memberId: undefined,
        type: undefined,
      },
      numsData: {}
    }
  },
  watch: {
    activeName: {
      handler() {
        this.loadNums()
        switch (this.activeName) {
          case 'cqwbd':
            this.loadCqwbd()
            break
          case 'bqwnj':
            this.loadBqwnj()
            break
          case 'wcry':
            this.loadWcry()
            break
          case 'ptwfxy':
            this.loadWfxy()
            break
          case 'yzwfxy':
            this.loadYzwfxy()
            break
          default:
            break;
        }
      },
    }
  },
  methods: {
    loadNums() {
      nums(this.queryParams.memberId).then(res=> {
        this.numsData = res.data
      })
    },
    loadCqwbd() {
      this.loading = true
      cqwbdList(this.queryParams.memberId).then(res=> {
        this.data = res.data
      }).finally(()=> {
        this.loading = false
      })
    },
    loadBqwnj() {
      this.loading = true
      bqwnjList(this.queryParams.memberId).then(res=> {
        this.data = res.data
      }).finally(()=> {
        this.loading = false
      })
    },
    loadWcry() {
      this.loading = true
      wcryList(this.queryParams.memberId).then(res=> {
        this.data = res.data
      }).finally(()=> {
        this.loading = false
      })
    },
    loadWfxy() {
      this.loading = true
      byptwfxyList(this.queryParams.memberId).then(res=> {
        this.data = res.data
      }).finally(()=> {
        this.loading = false
      })
    },
    loadYzwfxy() {
      this.loading = true
      byyzwfxyList(this.queryParams.memberId).then(res=> {
        this.data = res.data
      }).finally(()=> {
        this.loading = false
      })
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        memberId: this.queryParams.memberId,
        type: undefined,
      }
    },
    onClose() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        memberId: undefined,
        type: undefined,
      }
      this.visible = false
    },
    open(memberId) {
      this.visible = true
      this.queryParams.memberId = memberId
      this.loadNums()
      this.loadCqwbd()
    },
  }
}
</script>

<style scoped>

</style>
